$main_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial,
  sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';

/*$primary: #FF8888; $primary_hover: #EE7777;
$secondary: #442222;
$primary_background: #FFEEEE;

$primary: #837dff; $primary_hover: #5d58d7;
$secondary: #182952;
$primary_background: #f3f2ff;*/

:root {
  --primary: #837dff;
  --primary-hover: #5d58d7;
  --secondary: #182952;
  --primary-background: #f3f2ff;
  --black: #444;
  --black-alpha-1: #18295288;
  --black-alpha-2: #18295255;
  --grey-light: #eeeeee;
  --grey-dark: #92929c;
  --grey-background: #f5f5f7;
  --white: #fff;
  --pale-grey: #f5f5f7;
  --default-border-radius: 3px;
  --default-border-radius-large: 5px;
  --green: #18af2c;
  --red: #ff5154;
}

$primary: var(--primary);
$primary_hover: var(--primary-hover);
$secondary: var(--secondary);
$primary_background: var(--primary-background);

$black: var(--black);
$grey_light: var(--grey-light);
$grey_dark: var(--grey-dark);
$grey_white: var(--grey-background);
$white: var(--white);

$grey_background: var(--grey-background);

$green: var(--green);
$red: var(--red);
$yellow: #fed453;
$yellow_background: #fffbee;

$small_border_radius: 4px;
$medium_border_radius: 8px;

$small_box_shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
$base_box_shadow: 0 2px 15px rgba(0, 0, 0, 0.3); //0 2px 4px rgba(0, 0, 0, 0.5)
$larger_box_shadow: 0 2px 15px rgba(0, 0, 0, 0.2); //0 2px 4px rgba(0, 0, 0, 0.5)

$base_border_radius: 4px;
$larger_border_radius: 8px;
